import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xingsu/page/user/viewmodel/edit_user_viewmodel.dart';
import 'package:xingsu/util/image_util.dart';

class EditUserInfoPage extends StatelessWidget {
  final EditUserViewModel _viewModel = Get.put(EditUserViewModel());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("编辑个人资料"),
        actions: [
          Container(
            padding: const EdgeInsets.only(right: 15),
            alignment: Alignment.center,
            child: InkWell(
              onTap: _viewModel.saveClick,
              child: const Text(
                "保存",
                style: TextStyle(color: Colors.red),
              ),
            ),
          )
        ],
      ),
      body: ListView(
        padding: const EdgeInsets.symmetric(horizontal: 15),
        children: [
          Container(
            width: 85,
            height: 85,
            alignment: Alignment.center,
            child: InkWell(
                onTap: _viewModel.choosePic,
                child: Stack(
                  children: [
                    Obx(() => ClipRRect(
                          borderRadius: BorderRadius.circular(40),
                          child: _viewModel.pic.value.isEmpty
                              ? loadNetworkImage(
                                  "https://img0.baidu.com/it/u=1217304799,3113310756&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1673629200&t=038eb03edf5898fbb7802625c5611215",
                                  width: 80)
                              : Image.asset(
                                  _viewModel.pic.value,
                                  width: 80,
                                  height: 80,
                                  fit: BoxFit.cover,
                                ),
                        )),
                    Positioned(
                        right: 0,
                        bottom: 0,
                        child: Container(
                          width: 24,
                          height: 24,
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              color: const Color(0xFF14C4CC),
                              borderRadius: BorderRadius.circular(15)),
                          child: const Icon(
                            Icons.camera_alt_outlined,
                            color: Colors.white,
                            size: 20,
                          ),
                        ))
                  ],
                )),
          ),
          const SizedBox(
            height: 20,
          ),
          _nickname(),
          const SizedBox(
            height: 20,
          ),
          _birthday(),
          const SizedBox(
            height: 20,
          ),
          _biref()
        ],
      ),
    );
  }

  Widget _nickname() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          "昵称",
          style: TextStyle(color: Colors.grey, fontSize: 13),
        ),
        const SizedBox(
          height: 5,
        ),
        Container(
          alignment: Alignment.centerLeft,
          height: 30,
          child: TextField(
            controller: _viewModel.nicknameController,
            style: const TextStyle(fontSize: 14),
            decoration: const InputDecoration(
                border: InputBorder.none,
                hintText: "请输入昵称",
                hintStyle: TextStyle(fontSize: 14)),
          ),
        ),
        Divider(
          height: 1,
          color: Get.theme.dividerTheme.color,
        ),
        const SizedBox(
          height: 5,
        ),
        const Text(
          "30天内仅可以修改一次昵称哦",
          style: TextStyle(color: Colors.grey, fontSize: 13),
        )
      ],
    );
  }

  Widget _birthday() {
    return InkWell(
      onTap: _viewModel.chooseBirthday,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            "出生日期",
            style: TextStyle(color: Colors.grey, fontSize: 13),
          ),
          const SizedBox(
            height: 5,
          ),
          Container(
            height: 30,
            alignment: Alignment.centerLeft,
            child: Obx(() => Text(
                  _viewModel.birthday.isEmpty
                      ? "未选择"
                      : _viewModel.birthday.value,
                )),
          ),
          const SizedBox(
            height: 5,
          ),
          Divider(
            height: 1,
            color: Get.theme.dividerTheme.color,
          )
        ],
      ),
    );
  }

  Widget _biref() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: const [
        Text(
          "个人简介",
          style: TextStyle(color: Colors.grey, fontSize: 13),
        ),
        SizedBox(
          height: 5,
        ),
        TextField(
          maxLines: 2,
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: "输入一句话简介",
          ),
        ),
      ],
    );
  }
}
